<!--
 * @Author: your name
 * @Date: 2021-02-27 23:58:43
 * @LastEditTime: 2021-07-22 16:02:12
 * @LastEditors: your name
 * @Description: In User Settings Edit
 * @FilePath: \vue3-antd-koa\vue3-antd-pc\src\components\pagination.vue
-->
<template>
  <div>
    <a-pagination
      class="pagination"
      :total="total"
      :default-page-size="defaultPageSize"
      v-model:current="current"
      @change="onPageNumChange"
      simple
    />
  </div>
</template>
<script>
/**
 * 分页组件的封装：
 * 考虑的因素：
 * 1.封装路由参数实时获取
 * 使用到watchEffect 判断是否存在响应式变量，如果有则执行，无，则不执行
 * 使用到 vue-router 里面的 useRoute() 里面有很多请求的信息
 *
 * 2.封装路由变化跳转
 * 使用到的router是由 router.js 引入--并且使用了两个 函数(type)=>(value)=>
 *
 * 3.封装页码变化页面跳到顶部
 *
 *
 */
import { watchEffect } from "vue";
import { useRouteParamChange } from "@u/router.js";
import { useLinkedRouteParam } from "@u/route.js";
import { useWindowScrollTo } from "@u/scroll.js";
export default {
  props: {
    total: {
      type: Number,
      default: 0,
    },
    defaultPageSize: {
      type: Number,
      default: 5,
    },
    hasScroll: {
      type: Boolean,
      default: true,
    },
  },
  setup (props, { emit }) {
    const current = useLinkedRouteParam("pageNum");
    watchEffect(() => {
      if (props.hasScroll) {
        useWindowScrollTo({ top: 0 }, "auto");
      }
      emit("change", current.value); //如果注释掉这一行，则界面移动到顶部的功能则失效 这是因为watchEffect中没有响应式依赖，无法监听
    });
    // 修改url的参数
    const pageNumParamChange = useRouteParamChange("pageNum");
    const onPageNumChange = (PageNum) => pageNumParamChange(PageNum);
    return { current, onPageNumChange };
  },
};
</script>
<style scoped>
.pagination {
  text-align: center;
}
</style>